<div class="page-wrap height-100 mat-bg-primary">
  <div class="session-form-hold">
    <mat-progress-bar mode="determinate" class="session-progress"></mat-progress-bar>
    <mat-card>
      <mat-card-content>
        <div class="text-center pb-1">
          <img src="assets/images/logo-full.svg" alt="FreeNAS logo">
          <p class="text-muted">New password will be sent to your email address</p>
        </div>
        <form #fpForm="ngForm" (ngSubmit)="submitEmail()">

          <div class="">
            <mat-form-field class="full-width">
              <input
                matInput
                name="email"
                required
                [(ngModel)]="userEmail"
                #email="ngModel"
                placeholder="Email"
                value="">
            </mat-form-field>
            <small 
              *ngIf="email['errors'] && (email.dirty || email.touched) && (email['errors'].required)" 
              class="form-error-msg"> Email is required </small>
          </div>

          <button mat-button class="mat-primary full-width mb-1" [disabled]="fpForm.invalid">Submit</button>
          <div class="text-center">
            <a [routerLink]="['/sessions/signin']" class="mat-primary text-center full-width">Sign in</a>
            <span fxFlex></span>
            <a [routerLink]="['/sessions/signup']" class="mat-primary text-center full-width">Create a new account</a>
          </div>
        </form>
      </mat-card-content>
    </mat-card>
  </div>
</div>

